import * as React from 'react';
import { Form, Badge, Radio } from '@teamix/ui';
import { YunxiaoIcon, ButtonIcon } from '@alife/devops-ui';
import Popup from 'components/popup';
import './index.scss';
import intl from '../../locale';

const archivedRepoCheckDataSource = [
  {
    label: '仅展示未归档库',
    value: false,
  },
  {
    label: '仅展示归档库',
    value: true,
  },
];

export default class RepoAdvancedSearch extends React.Component {
  onArchivedChange = (v) => {
    this.doSearch({
      archived: v,
    });
  };

  doSearch = (data) => {
    this.props.onSearch && this.props.onSearch(data);
  };

  // 点击清除筛选表单内容返回到默认值
  onResetClick = () => {
    this.onArchivedChange(false);
  };

  getBadgeDot = () => {
    const { archived } = this.props;
    return archived !== false;
  };

  render() {
    const { archived } = this.props;
    const hasDot = this.getBadgeDot();

    return (
      <Popup
        className="repo_advanced_search"
        trigger={
          <Badge dot={hasDot}>
            <ButtonIcon name="filter-line" />
          </Badge>
        }
        triggerType="click"
        footer={
          <Form.Item style={{ marginBottom: '0px' }}>
            <Form.Reset
              text
              type="primary"
              style={{ border: 0 }}
              onClick={this.onResetClick}
              toDefault
              className="advanced-search-form-btn"
            >
              <YunxiaoIcon type="delete-line" />
              {intl.get({
                id: 'code-assets.components.repoAdvancedSearch.ClearAllFilterConditions',
                defaultMessage: '清除所有筛选条件',
              })}
            </Form.Reset>
          </Form.Item>
        }
      >
        <Form>
          <Form.Item label="代码库状态">
            <Radio.Group
              value={archived}
              itemDirection="hoz"
              dataSource={archivedRepoCheckDataSource}
              onChange={this.onArchivedChange}
            />
          </Form.Item>
        </Form>
      </Popup>
    );
  }
}
